<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>七大准则</title>
  </head>
  <body>
    <style>
      * {
        margin: 0px;
        padding: 0px;
      }
      #top {
        letter-spacing: 7px;
        text-align: center;
        margin-top: 50px;
      }
      #top #top-font {
        text-align: center;
        letter-spacing: 1px;
      }
      #left {
        position: absolute;
        width: 50%;
        margin-left: 2px;
        margin-top: 20px;
      }
      #right {
       position: absolute;
       margin-top: 20px;
       margin-left: 51%;
       width: 50%;
       letter-spacing: 5px;
       line-height: 30px;
      
      }
      #left-font2{
        font-style:oblique;
        font-size: 10px;
      }
    </style>
    <div id="all">
      <div id="top">
        <h1>把握<font color="blue">移动端字体</font>设计的七大准则</h1>
        <br />
        <div id="top-font">
          <p>
            更新时间:<font color="blue">2020年06月17时26分</font
            >&nbsp;&nbsp;&nbsp;来源:<font color="blue">问答精灵</font>
          </p>
        </div>
      </div>

      <div id="left">
        <img src="../html/image/01/fengjing.jpg" alt="" width="100%" />
      </div>
      <div id="right">
        <div id="right-font">
        <p>&spades;<font color="red">留足空间，字体并非弯弯曲曲的线条排列</font>，它主要在于周围和相互的空间。</p>
        <p>&spades;行宽是一行文字的长度，<font color="red">是一行文字的理想长度</font>，因为很难让每一行都精确吻合。</p>
        <p>&spades;行距是行之间的空间，行距太紧凑，<font color="red">会让视线难以从行尾扫描到下一行首</font>。</p>
        <p>&spades;所有字体至少都有一种最佳状态，<font color="red">使字体在浏览器中最能保持字形的抗锯齿选项</font>。</p>
        <p>&spades;你读取的多数内容是<font color="red">居左对齐，有边沿参差不齐的</font>，这样看起来更<font color="red">有节奏</font>。</p>
        <p>&spades;增强文字与背景对比的同时，我们要在<font color="red">减少不同层次文字间的反差</font>。</p>
        <p>&spades;<font color="red">按比例调整字间距</font>，为移动端调整字号时，要意识到字间距发生了变化。</p>
        <hr color="#fedcbd">
        <div id="left-font2"></font>原文链接：<font color="blue" >http://www.woshipm.com/pd/136680.html</font> &nbsp;&nbsp;&nbsp;&nbsp; 文章分类：<font color="blue">艺术设计</font>
        </div>
      </div>
    </div>
   
  </body>
</html>
